(function() {
      var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        title: {
        text: '学生分布图'
    },
        tooltip: {},
        legend: {
        data: ['学生数']
    },
        xAxis: {
        data: ['软件1班', '软件2班', '软件3班', '软件4班', '信科1班', '信科2班'],
            axisLabel: {
                interval: 0,    //强制文字产生间隔
                //rotate: 45,     //文字逆时针旋转45°
                textStyle: {    //文字样式
                    color: "black",
                    fontSize: 16,
                    fontFamily: 'Microsoft YaHei'
                }
            }
    },
        yAxis: {},
        series: [
    {
        name: '学生数',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }
        ]
    };
    // 在数据为动态加载之前建筑loading动画

    myChart.showLoading();



// 对数据进行重写,变成动态数据



    var clazz=[];

    var students=[];




    $.ajax({

        type:"post",

        async:true,

        url:"getStudentNumWithClazz",

        data:{},

        dataType:"json",

        // 回调函数

        success:function (result) {
            // console.log(result.clazz)
            if(result != null && result.count > 0) {
                for (var i = 0; i < result.count; i++){
                    // console.log(result.clazz[i].cname)
                    clazz.push(result.clazz[i].cname);
                    students.push(result.studentNum[i])
            }
                // 隐藏加载动画

                myChart.hideLoading();



                // 重新载入 Option

                myChart.setOption({

                    xAxis:{

                        data:clazz,    // 重写 x 轴
                        axisLabel: {
                            interval: 0,    //强制文字产生间隔
                            //rotate: 45,     //文字逆时针旋转45°
                            textStyle: {    //文字样式
                                color: "black",
                                fontSize: 16,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    },
                    series: [
                        {
                            name: '学生数',
                            type: 'bar',
                            data: students
                        }
                    ]

                })

            }

        }

    })

        myChart.setOption(option);

})();
(function() {
    var myChart = echarts.init(document.getElementById('pie'));

    // 指定图表的配置项和数据
    var option = {
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 335,
                        name: '直接访问'
                    },
                    {
                        value: 234,
                        name: '联盟广告'
                    },
                    {
                        value: 1548,
                        name: '搜索引擎'
                    }
                ]
            }
        ]
    };
    // 在数据为动态加载之前建筑loading动画

    myChart.showLoading();



// 对数据进行重写,变成动态数据



    var clazz=[];

    var students=[];

    var obj={}
    const arr = []
    $.ajax({

        type:"post",

        async:true,

        url:"getStudentNumWithClazz",

        data:{},

        dataType:"json",

        // 回调函数

        success:function (result) {
            // console.log(result.clazz)
            if(result != null && result.count > 0) {
                for (var i = 0; i < result.count; i++){
                    // console.log(result.clazz[i].cname)
                    clazz.push(result.clazz[i].cname);
                    students.push(result.studentNum[i])
                    obj={
                        "value": result.studentNum[i],
                        "name": result.clazz[i].cname
                    }
                    arr.push(obj)

                }
                // 隐藏加载动画

                myChart.hideLoading();



                // 重新载入 Option

                myChart.setOption({

                    series: [
                        {
                            type: 'pie',
                            data:arr
                        }
                    ]

                })

            }

        }

    })

    myChart.setOption(option);

})();